<template>
  <div class="comp-newslist-info-wrapper">
    <ul>
      <li v-for="(item, index) in newsList" :key="index" @click="jump(item.id)">
        <div class="text">
          <h5>
            <i>{{ item.listI }}</i>
            <span>{{ item.listSpan }}</span>
          </h5>
          <p class="p1">
            {{ item.listP1 }}
          </p>
          <p class="p2">
            {{ item.listP2 }}
          </p>
          <a href="#"
            ><button>{{ item.listA }}</button></a
          >
        </div>
        <div class="img">
          <img src="@/assets/image/1.png" alt="" />
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "NewsListInfo",
  props: {
    newsList: {
      type: Array,
      default: [],
    },
  },
  methods: {
    jump(id) {
      // this.$router.push(`/news/detail?newsId=${id}`)

      // this.$router.push({
      //   path:'/news/detail',
      //   query:{
      //     newsId: id
      //   }
      // })

      // this.$router.push({
      //   path:`/news/detail?newsId=${id}`,
      // })

      this.$router.push({
        name: "NewsDetail",
        query: {
          newsId: id,
        },
      });

      // this.$router.push(`/news/detail/${id}`)

      // this.$router.push({
      //   name: "NewsDetail",
      //   params: {
      //     id,
      //   },
      // });
    },
  },
};
</script>

<style scoped lang="less">
.comp-newslist-info-wrapper {
  width: 1118px;
  margin: 0 auto;
  li {
    overflow: hidden;
    .text {
      text-align: left;
      float: left;
      width: 560px;
      height: 285px;
      border-bottom: 2px #e8e8e8 solid;
      margin-bottom: 75px;
      position: relative;
      h5 {
        margin-bottom: 20px;
        i {
          color: #90b8f1;
        }
        span {
          display: block;
          color: #1d71e9;
          font-size: 30px;
          font-weight: 500;
        }
      }
      .p1 {
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: 20px;
      }
      .p2 {
        color: #999999;
        margin-bottom: 50px;
      }
      button {
        position: absolute;
        right: 0;
        bottom: 24px;
        color: #1d71e9;
        border: 1px solid #1d71e9;
        width: 100px;
        height: 33px;
        border-radius: 16px;
        background: none;
      }
    }
    .img {
      float: right;
      width: 428px;
      height: 280px;
      border: 1px solid black;
      img {
        width: 428px;
        height: 280px;
      }
    }
  }
}
</style>